<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebGL Beginner's Guide - Chapter 2 - Rendering Modes </title>

    <script type="text/javascript" src="/src/js/utils.js"></script>
    <script type="text/javascript" src="/src/js/jquery-1.5.1.min.js"></script>
    <script type="text/javascript" src="/src/js/jquery-ui-1.8.13.custom.min.js"></script>
    <script type="text/javascript" src="/src/js/prettify.js"></script>
    <script type="text/javascript" src="/src/js/codeview.js"></script>

    <!--    Fragment Shader-->
    <script id="shader-fs" type="x-shader/x-fragment">
        #ifdef GL_ES
        precision highp float;
        #endif
        void main(void){
            gl_FragColor = vec4(0.5, 0.5, 1.0, 1.0);
        }
    </script>
    <!--    Vertex Shader-->
    <script id="shader-vs" type="x-shader/x-vertex">
        attribute vec3 aVertexPosition;

        void main(void){
            gl_Position = vec4(aVertexPosition, 1.0);
            gl_PointSize = 4.0;
        }
    </script>
</head>

<body>
<div id="top">
    <h1>WebGL Beginner's Guide - Chapter 2</h1>
    <h2>Rendering a trapezoid</h2>
    <div id="logo-packt"><img src="packt.gif" alt=""></div>
    <p>WebGL uses buffers to store and process vertex and index data. The mechanism is the same whether we are rendering
        a simple object like a square or a racing car as we will see later on.</p>
</div>
<div id="contents">
    <div id="canvasContainer">
        <canvas id="canvas-element-id" width="480" height="400">
            Your browser does not support the HTML5 canvas element.
        </canvas>
    </div>
</div>
<div id="bottom">
    Please select one option:
    <select name="changeOpt" id="option-select">
        <option value="TRIANGLES" selected>TRIANGLE</option>
        <option value="LINES">LINES</option>
        <option value="POINTS">POINTS</option>
        <option value="LINE_LOOP">LINE_LOOP</option>
        <option value="LINE_STRIP">LINE_STRIP</option>
        <option value="TRIANGLE_STRIP">TRIANGLES_STRIP</option>
        <option value="TRIANGLE_FAN">TRIANGLES_FAN</option>
    </select>
</div>
<script>cview.run();</script>
</body>

</html>
